<template>
  <el-drawer
    v-model="visible"
    title="关联房间"
    size="600px"
    append-to-body
    :close-on-click-modal="false"
  >
    <div class="drawer-container">
      <!-- 搜索区域 -->
      <!-- <div class="search-form">
        <el-form :inline="true">
          <el-form-item>
            <el-input
              v-model="queryParams.searchStr"
              placeholder="请输入房间号"
              clearable
              @keyup.enter="handleQuery"
            >
              <template #append>
                <el-button :icon="Search" @click="handleQuery" />
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div> -->

      <!-- 列表区域 -->
      <div class="table-wrapper">
        <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%"
        >
          <el-table-column label="房间名称" prop="roomName" />
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button 
                link 
                type="primary" 
                @click="handleBind(row)"
              >
                绑定
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { bindRoom } from '@/api/device/eleMeter'
import { getNotBindMeterList } from '@/api/room/room'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  electricityMeterId: {
    type: [String, Number],
    required: true
  }
})

const emit = defineEmits(['update:visible', 'bind-complete'])
const { proxy } = getCurrentInstance()

const visible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

const loading = ref(false)
const list = ref([])
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  searchStr: ''
})

/* 查询列表 */
function getList() {
  loading.value = true
  // 调用电表的未绑定列表接口
  getNotBindMeterList({
    ...queryParams.value
  }).then(res => {
    if (res.code === 200) {
      list.value = res.rows.map(item => ({
        roomName: item.name,
        roomId: item.roomId
      }))
      console.log(list.value)
      total.value = res.total
    }
  }).finally(() => {
    loading.value = false
  })
}

/* 搜索 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/* 绑定房间 */
function handleBind(row) {
  proxy.$modal.confirm('确认要绑定该房间吗？').then(() => {
    bindRoom(props.electricityMeterId, row.roomId).then(res => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess('绑定成功')
        visible.value = false
        emit('bind-complete')
      }
    })
  }).catch(() => {})
}

/* 分页大小改变 */
function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getList()
}

/* 页码改变 */
function handleCurrentChange(val) {
  queryParams.value.pageNum = val
  getList()
}

watch(() => visible.value, (val) => {
  if (val) {
    // 重置查询参数
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      searchStr: ''
    }
    getList()
  }
})
</script>

<style lang="scss" scoped>
.drawer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  
  .search-form {
    flex-shrink: 0;
    margin-bottom: 20px;
  }
  
  .table-wrapper {
    flex: 1;
    overflow: auto;
  }
  
  .pagination-container {
    flex-shrink: 0;
    margin-top: 20px;
    padding: 10px 0;
    background: #fff;
    text-align: right;
  }
}
</style> 